<template>
  <div>

    <!-- 头部开始 -->
        <Headers></Headers>

    <!-- 头部结束 -->

    <div class="clearfix"></div>

    <div class="page-container">
    <!-- 侧边导航开始 -->
      <Bars :number="glNum"></Bars>
    <!-- 侧边导航结束 -->



    <!-- 正文开始;ajax请求内容 -->
  <div class="page-content-wrapper">
    <div class="page-content">
   


      <!-- 面包削导航开始-->
      <div class="page-bar">
        <ul class="page-breadcrumb">
          <li>
            <i class="fa fa-home"></i>
            <a>平台设置</a>/
          
            <router-link to="/screenLook" tag="a" >
              {{this.title}}
            </router-link>
          </li>

        </ul>

      </div>
      <!-- 面包削导航结束-->


      <div class="clearfix">
      </div>
      
      <div class="row">
       
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>{{this.title}}
              </div>
             <div class="cz">

                <button id="sample_editable_1_new" class="btn green" data-toggle="modal" href="#addData">新增 <i class="fa fa-plus"></i></button>
                <button id="sample_editable_1_new" style="margin-right: 10px;" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i></button>
                <div class="btn-group pull-right ">
                  <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                  </button>
                  <ul class="dropdown-menu pull-right style">
                    <li>
                      <a href="javascript:;">
                      打印 </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      另存为PDF </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      导出为Excel </a>
                    </li>
                  </ul>
                </div>
            
              </div>

            </div>
            <div class="portlet-body">
          
              <div class="row color">

                <div class="col-md-3 mb10">
                  <div class="search">
                     <input type="text" class="form-control" placeholder="请输入关键字">
                  </div>
                </div>
                <div class="col-md-5 mb10">
                  <div class="search">
                   
                    <button class="btn green">查询 <i class="fa fa-search"></i></button>
                    </div>
                  </div>
                </div>
              <div class="tableDiv">
                <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                  <thead>
                    <tr>
                    <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                    </th>
                    <th>
                       序号
                    </th>
                    <th>
                       类别
                    </th>
                    <th>
                       标签内容
                    </th>
                    <th>
                       功能操作
                    </th>
                  </tr>
                  </thead>
                  <tbody>

                  <tr class="odd gradeX" v-for="(item,index) in list">
                    <td>
                      <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,index)"/>
                    </td>
                    <td>
                     {{(page_num-1)*10+index+1}}
                    </td>
                    <td>
                     {{item.user_name}}
                    </td>
                    <td>
                      {{item.app_name}}
                    </td>
                    <td>
                      <a style="color:#5b9bd1" data-toggle="modal" href="#lookinfor" class="infor" @click="lookData($data,index)">详情</a> |  
                      <a style="color:#5b9bd1" class="edit" data-toggle="modal" href="#modifyData" @click="modifyData($data,index)">编辑</a> |
                      <a style="color:#5b9bd1" data-toggle="modal" href="#delete" class="delete" @click="deleteData($data,index)">删除</a>
                    </td>
                  </tr>
                
                  </tbody>
                </table>
                  <!--无数据提示开始-->
                <transition name="fade">
                  <NotConTip :showTip.sync="showTip" :tipText="tipText"></NotConTip>
                </transition>
                <!--无数据提示结束-->
                <div class="undefinedbootstrap_full_number">
                  <span class="dataTotal">
                    共 <span class="numData">{{pageNum}}</span> 页 　  
                  </span>
                  <ul class="pagination" style="visibility: visible;">
                    <li class="prev disabled" @click="firstFlag && firstPage()">
                      <a title="第一">首页</i></a>
                    </li>
                    <li class="prev disabled" @click="prevFlag && prevPage($event)">
                      <a title="上一页"><i class="fa fa-angle-left"></i></a>
                    </li>
                    <li v-for="(item,index) in page" :class="{active:index+1==(page_num),block:((min<=index)&&(index<=max))}" class="pageLi" @click="nowFlag && nowPage(index)">
                        <a>{{index+1}}</a>
                    </li>
                    <li class="next" :class="{disabled:pageNum<=1}" @click="nextFlag && nextPage($event)">
                      <a title="下一个"><i class="fa fa-angle-right"></i></a>
                    </li>
                    <li class="next" :class="{disabled:pageNum<=1}" @click="lastFlag && lastPage()">
                      <a title="持续">尾页</a>
                    </li>
                      
                  </ul>
                  <span class="dataTotal">
                    每页显示 <span class="numData">{{page_size}}</span> 条数据 　  
                  </span>
                  <span class="dataTotal">
                    跳转至 <input type="text" value="page_num_ma" style="border:1px solid #dbdbdb;font-size: 14px;color:#333;width: 50px;padding: 5px 10px;text-align: center;" v-model="page_num_ma"> 页 　  
                  </span>
                  <button class="btn green" @click="toPage()" style="position: relative;top: -22px;padding: 5px 14px;">跳转
                  </button>
                </div>
                </div>
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>


    </div>
  </div>
  <!-- 正文结束;ajax请求内容 -->

    </div>

      <!-- 确定删除弹框开始 -->
      <div id="delete" class="modal fade" tabindex="-1" >
        <div class="modal-title">
          <p>
             确定删除?
          </p>
        </div>
        <div class="modal-body">
          <p style="color: #ff3300;">
            是否要删除标签类别为{{lookObj.user_name}}的信息！
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
          <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        </div>
      </div>
      <!-- 确定删除弹框结束 -->

      <!-- 新增设备房信息开始 -->
      <div id="addData" class="modal fade" tabindex="-1" data-width="760">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">新增app标签</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
                <div class="col-md-4">
                  标签名称 :
                </div>
                <div class="col-md-8">
                  <input class="form-control" placeholder="请输入标签名称" type="text">
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-md-4">
                  标签类型 :
                </div>
                <div class="col-md-8">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">全部</option>
                    <option value="设备维保计划数量">房间管理中用途为设备房的列表 父级为小区名</option>
                  
                  </select>
                </div>
            </div>
           

          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue" @click="saveData">保存</button>
        </div>
      </div>              
      <!-- 新增设备信息结束 -->
      
      <!-- 设备详情弹框开始 -->
      <div id="lookinfor" class="modal fade" tabindex="-1" data-width="760">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">标签详情</h4>
        </div>
        <div class="modal-body">
          <div class="row m0 center">
            <div class="col-md-6"> 
              标签类别 : {{lookObj.number}}
            </div>
            <div class="col-md-6">
              标签内容 : {{lookObj.number}}
            </div>
            
          </div>
      
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn blue">确定</button>
         
        </div>
      </div>              
      <!-- 设备详情弹框结束 -->

      <!-- 编辑设备信息开始 -->
      <div id="modifyData" class="modal fade" tabindex="-1" data-width="600">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">标签编辑</h4>
        </div>
        <div class="modal-body">
          <div class="row m10">
            <div class="col-md-12">
                <div class="col-md-2">
                  标签类型 :
                </div>
                <div class="col-md-10">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">类型一</option>
                    <option value="">类型二</option>
                  </select>
                </div>
            </div>
            <div class="col-md-12">
              <div class="col-md-2">
                标签名 :
              </div>
              <div class="col-md-8 tagInput">
                <input class="form-control" :value="lookObj.floor_no" placeholder="输入您想添加的标签" type="text">
                <p class="error hide" style="font-size: 14px;margin: 10px 0 0 0;color: #ff3300;">请输入标签名</p>
                <p class="existence hide" style="font-size: 14px;margin: 10px 0 0 0;color: #ff3300;">标签名已经存在</p>

                <!-- <img src="../../../static/images/clear.png" class="close" alt=""> -->
              </div>
              <div class="col-md-1">
                <button class="btn green" type="button" @click="addTag($event)" style="position: relative;left: 9px;">增加</button>
              </div>
            </div>
              
              <div class="col-md-12">
                <div class="col-md-2" style="font-weight: 500;color: #333;">
                  当前标签 :
                </div>
                <div class="col-md-10" style="font-weight: 500;color: #333;">
                  <div class="tagMenu">
                    <ul class="tagList clearfix">
                      <li v-for="(item,index) in tagList" @click="delegeTag($event)">
                        <img src="../../../static/images/clear.png" class="clear" alt="">
                        {{item}}
                      </li>
                     
                    </ul>
                  </div>
                </div>
              </div>

            </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue" @click="saveData">保存</button>
        </div>
      </div>                
      <!-- 编辑设备信息结束 -->

    <!-- 底部开始 -->
    <Foot></Foot>
    <!-- 底部结束 -->

  </div>

</template>     
    
<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-12 >div{margin-bottom: 10px;}
    .row.m10 .col-md-12 .col-md-2{position: relative;top: 6px;color: #333;font-weight: 500;}
    .tree-view-item-key {font-size: 20px;color: black;}
    .tree-view-item-value {font-size: 20px;font-weight: bold;color: white;}

    .tagMenu{width: 100%;padding: 10px;border:1px solid #dbdbdb;min-height: 60px;padding-bottom: 0;}
    .tagList{}
    .tagList li{padding:6px 15px;border-radius:5px !important;float: left;font-weight: 500;color: #fff;background: #1b63a5;position: relative;margin-right: 10px;margin-bottom: 10px;font-size: 14px;}
    .tagList li .clear{position: absolute;right: 0;top: 0;width: 15px;height: 15px;}
    .tagList li .clear:hover{cursor: pointer;}
    .row .col-md-6>div{margin-bottom: 10px;}
    .row .col-md-6 .col-md-4{position: relative;top: 6px;color: #333;font-weight: 500;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>



<script>
  // import '../../../static/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js';
  // import '../../../static/global/plugins/bootstrap-modal/js/bootstrap-modal.js';

  // import '../../../static/global/plugins/datatables/media/js/jquery.dataTables.min.js';

  // //highcharts插件
  // import highcharts from 'highcharts'  

  import Metronic from '../../../static/global/js/metronic.js';
  import {check,Tips} from '../../../static/js/pages/tips.js';


  import Headers from '../../components/Headers.vue';
  import Bars from '../../components/Bars.vue';
  import Foot from '../../components/Foot.vue';
  import NotConTip from '../../components/noConTip.vue' 

  import optVue from '../../config/optVue.js';
  import {setStore,getStore,removeStore} from '../../config/common.js';
  export default {
    data(){
      return{
        dataObj:{}, // json对象
        total:Number, //总条数  
        page: [], //页码数组
        pageNum: Number, //页数
        page_size: Number, //每页显示多少条
        page_num: Number, //当前页码
        page_num_ma:1,
        list:[],
        number:0,
        min:Number,
        firstFlag:false,
        prevFlag:false,
        nowFlag:true,
        nextFlag:true,
        lastFlag:true,
        max:5,
        maxNum:5,
        tipText:"暂无数据",
        showTip:false,
        tagList:["11","22"],
        lookObj:{},
        modifyNum:{},
        title:"",
        dataList:[],
        glNum:6
      }
    },
    components: {
        Headers,Bars,Foot,NotConTip
    },
      mounted(){
      document.title = 'app标签管理';
      this.title = document.title
     
      optVue.appBqgl(this);

      $(function(){
    
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
        
      })
    },
    methods:{
      deleteData:function (data,index) {
        this.dataList = data;
        this.index = index;
        this.lookObj = data.list[index]
      },
   
      lookData : function(data,index){
        this.dataList = data;
        this.index = index;
        this.lookObj = data.list[index]
      },
      sureDelete:function(event){
     
        this.list.splice(this.index, 1);

        /*提示信息*/
        Tips.init({
          type:"success",
          message:"删除成功",
          class:"on"
        });
       //optVue.sbfgl(this);
      },
      addTag:function(event){
        var addTag = $("#addTag"); 
        var tagInput = $(".tagInput");
        var tagList1 = $(".tagList");
        var tar = $(event.target).closest(".tagInput")
        var error = $(".error");
        var existence = $(".existence");
        var tagHtml = "";
        var value = $.trim(tagInput.find("input").val());
          if(value==''){
            error.removeClass("hide");
            return
          } 
          error.addClass("hide");

          if($.inArray(value, this.tagList) < 0){
              this.tagList.push(value);
              existence.addClass("hide");
          }
          else{
              existence.removeClass("hide");
          }
          

      },
      delegeTag:function(){

      },
      showPageindex : function(min, max, index) {               
        if (index <= Math.ceil(max / 2)) {
            var min = 0;
            var max = max;
        }
       else if (this.pageNum - index < Math.ceil(max / 2)) {
          var min = this.pageNum - max;
          var max = this.pageNum ;

        } 
        else{
          var min = Math.ceil(index - max / 2)-1;
          var max = index + Math.ceil(max / 2)-1;
        }
        this.min = min;
        this.max = max;
      },
      nowPage:function(index){
        if(this.pageNum<=1){
          return;
        }
        this.number = index;
        if(this.number == 0){
          $(".prev").addClass("disabled");
          $(".next").removeClass("disabled");
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
        }
        else if(this.pageNum-1 == this.number){
          $(".next").addClass("disabled");
          $(".prev").removeClass("disabled");
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
        }
        else{
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = true;
          this.nextFlag = true;
          $(".next").removeClass("disabled");
          $(".prev").removeClass("disabled");
        }
        $(".table-checkbox").closest("table").find(".checkboxes").prop({checked:false})

        this.showPageindex(0,this.maxNum,this.number+1);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
        
      },
      nextPage:function(el){
        if(this.pageNum<=1){
          return;
        }
       

        $(".prev").removeClass("disabled");
        if(this.pageNum == this.number+2){

          $(".next").addClass("disabled");
         

        }
        if(this.pageNum == this.number+1){
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number++;
        this.showPageindex(0,this.maxNum,this.number+1);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
      },
      prevPage:function(el){
        if(this.pageNum<=1){
          return;
        }
        $(".next").removeClass("disabled");
        if(this.number == 1){
          $(".prev").addClass("disabled");
          
        }
        if(this.number == 0){
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number--;
        this.showPageindex(0,this.maxNum,this.number+1);
        //var pageArr = 
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
      },
      lastPage:function(){
        if(this.pageNum<=1){
          return;
        }
        $(".next").addClass("disabled");
        $(".prev").removeClass("disabled");
        this.number = this.pageNum-1;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.pageNum
        }
        optVue.xqglNowPag(this,pageArr);
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = false;
        this.nextFlag = false;
       
      },
      firstPage:function(){
        if(this.pageNum<=1){
          return;
        }

        $(".prev").addClass("disabled");
        $(".next").removeClass("disabled");
        this.number = 0;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
        this.firstFlag = false;
        this.prevFlag = false;
        this.lastFlag = true;
        this.nextFlag = true;
      },
     
      allDelete:function(event){
        console.log($(".checkboxes").is(':checked'))
        if($(".checkboxes").is(':checked')){
          
        }
      },
      saveData:function(){
        
      },
      modifyData:function(data,index){
        this.dataList = data;
        this.index = index;
        this.lookObj = data.list[index]
      }
        

    }

  }


</script>



